<template>
  <div>
    <el-form :ref="formRef" :model="formColumnsData" :label-width="labelWidth" status-icon :rules="formColumnsRule" size="formSize">
      <el-form-item v-for="(item,index) in formColumns" :label="item.label" :prop="item.prop" :key="index" v-if="item.dataType === 'varchar' && !item.hidden">
        <template>
          <slot :name="item.prop" :data="formColumnsData">
            <el-input type="text" v-model="formColumnsData[item.prop]"  autocomplete="off" size="mini"></el-input>
          </slot>
        </template>
      </el-form-item>
      <el-form-item v-for="(item,index) in formColumns" :label="item.label" :prop="item.prop" :key="'selectChild' + index" v-if="item.dataType === 'select' && !item.hidden">
        <el-select v-model="formColumnsData[item.prop]" placeholder="请选择" size="mini">
          <el-option
            v-for="itemChild in item.options"
            :key="itemChild.value"
            :label="itemChild.label"
            :value="itemChild.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-for="(item,index) in formColumns" :label="item.label" :prop="item.prop" :key="index" v-if="item.dataType === 'radio'">
        <el-radio v-model="formColumnsData[item.prop]" v-for="(itemChild,index) in item.value" :label="itemChild.label" :key="'child' + index" size="mini">{{itemChild.showName}}</el-radio>
      </el-form-item>
      <el-form-item v-for="(item,index) in formColumns" :label="item.label" :prop="item.prop" :key="index" v-if="item.dataType === 'checkbox'">
        <el-checkbox-group v-model="formColumnsData[item.prop]">
          <el-checkbox v-for="(itemChild,index) in item.value" :label="itemChild.label" :key="'checkboxItemChild' + index">{{itemChild.label}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item v-for="(item,index) in formColumns" :label="item.label"  :prop="item.prop" :key="index" v-if="item.dataType === 'datePicker'">
        <el-date-picker
          v-model="formColumnsData[item.prop]"
          :type="datePicker.type"
          :start-placeholder="datePicker.startPlaceholder"
          :end-placeholder="datePicker.endPlaceholder"
          :size="datePicker.size"
          :format="datePicker.format"
          :default-time="datePicker.defaultTime">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: right">
      <el-button type="text" @click="handleCancel(formType)"><i class="fa fa-remove fa-fw">&nbsp;</i>取 消</el-button>
      <el-button type="text" @click="handleOk(formColumnsData,formType)"><i class="fa fa-plus fa-fw">&nbsp;</i>确 定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    formType: {
      type: String,
      default: 'add'
    },
    editData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    formColumns: {
      type: Array
    },
    formColumnsRule: {
      type: Object
    },
    formSize: {
      type: String,
      default: 'mini'
    },
    labelWidth: {
      type: String,
      default: '85px' // 设置这个值让标签名与输入框在同一行
    },
    datePicker: {
      type: Object,
      default: function () {
        return {
          type: 'daterange',
          startPlaceholder: '开始日期',
          endPlaceholder: '结束日期',
          size: 'small',
          format: 'yyyy-MM-dd HH:mm:ss',
          defaultTime: ['00:00:00', '23:59:59']
        }
      }
    },
    customColumnsData: {
      type: Object
    }
  },
  data () {
    return {
      formColumnsData: {}
    }
  },
  computed: {
    formRef () {
      return this.formType + 'Form'
    }
  },
  watch: {
    customColumnsData: {
      handler: function (value, oldValue) {
        Object.keys(value).forEach(key => {
          this.formColumnsData[key] = value[key]
        })
      },
      deep: true
    },
    editData: {
      handler: function (value, oldValue) {
        Object.keys(value).forEach(key => {
          this.formColumnsData[key] = value[key]
        })
      },
      deep: true
    }
  },
  mounted: function () {
    // this.formColumns.forEach(item => {
    //   // this.addColumnsData[item.prop] = undefined
    //   // Vue.set(object, key, value)
    //   if (item.dataType === 'checkbox') {
    //     this.$set(this.formColumnsData, item.prop, [])
    //   } else {
    //     this.$set(this.formColumnsData, item.prop, undefined)
    //   }
    // })
    // if (JSON.stringify(this.editData) === '{}') {
    //   return
    // }
    // Object.keys(this.editData).forEach(key => {
    //   this.formColumnsData[key] = this.editData[key]
    // })
  },
  created: function () {
    this.formColumns.forEach(item => {
      // this.addColumnsData[item.prop] = undefined
      // Vue.set(object, key, value)
      if (item.dataType === 'checkbox') {
        this.$set(this.formColumnsData, item.prop, [])
      } else {
        this.$set(this.formColumnsData, item.prop, undefined)
      }
    })
    if (JSON.stringify(this.editData) === '{}') {
      return
    }
    Object.keys(this.editData).forEach(key => {
      this.formColumnsData[key] = this.editData[key]
    })
    // let arr = document.querySelectorAll('div.el-form-item__error')
    // arr.forEach((item) => {
    //   item.classList.add('el-form-item__error_update')
    // })
  },
  methods: {
    getFormData () {
      this.$emit('getFormData', this.formColumnsData)
    },
    handleOk (data = {}, type) {
      this.$emit('getFormData', data, type, this.$refs)
    },
    handleCancel (type) {
      switch (type) {
        case 'add':
          this.$refs[this.formRef].resetFields()
          break
        case 'edit':
          break
        default:
          alert(type + ':没有定义此操作!')
          break
      }
      this.$emit('handleCancel', type)
    }
  }
}
</script>

<style scoped>
  .el-form-item {
    margin-bottom: 6px;
  }
  /* 这种只有错误才会生成的元素,采取深度作用选择器 */
  .el-form-item >>> .el-form-item__error {
    padding-top: 0px;
  }

</style>
